<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>订单查询</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="querry-order">
      <search-btn-view :btn-text="['订单查询','明细查询']" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="changeMode" v-if="showTableMode==='order'">
            <span v-if="mode==='simple'">复杂模式</span>
            <span v-else-if="mode==='hard'">简单模式</span>
          </el-button>
        </template>
        <div slot="search-content" class="querry-order-search clearfix">
          <div class="search-form-item">
            <el-select v-model="search.timeType" style="width:105px;">
              <el-option :value="1" label="制单日期"></el-option>
              <el-option :value="2" label="交货日期"></el-option>
              <el-option :value="3" label="人工排期"></el-option>
            </el-select>
            <el-date-picker style="width:140px;" v-model="search.startDate" value-format="timestamp" :clearable="false"
              :editable="false" :picker-options="startPickerOptions">
            </el-date-picker>
            -
            <el-date-picker style="width:140px;" v-model="search.endDate" value-format="timestamp" :clearable="false"
              :editable="false" :picker-options="endPickerOptions">
            </el-date-picker>
          </div>
          <div class="search-form-item">
            <label>拖期</label>
            <el-select v-model="search.dutyStatus" class="form-input">
              <el-option :value="0" label="全部"></el-option>
              <el-option :value="1" label="拖期"></el-option>
              <el-option :value="2" label="即将拖期"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>部门</label>
            <el-select v-model="search.deptId" class="form-input" @change="deptChange">
              <el-option value="" label="全部"></el-option>
              <el-option v-for="dept in deptList" :key="`dept_${dept.id}`" :value="dept.id" :label="dept.name"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>车间</label>
            <el-select v-model="search.workShop" class="form-input" :loading="workShopLoading">
              <el-option value="" label="全部" v-if="search.workShopList.length>1"></el-option>
              <el-option v-for="workShop in search.workShopList" :key="`workShop_${workShop.id}`" :value="workShop.id"
                :label="workShop.name"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>状态</label>
            <el-select v-model="search.type" class="form-input">
              <el-option :value="0" label="全部"></el-option>
              <el-option :value="1" label="完成"></el-option>
              <el-option :value="2" label="未完成"></el-option>
            </el-select>
          </div>
          <div class="search-form-item">
            <label>客户型号</label>
            <el-input v-model="search.customerId" class="form-input" placeholder="请输入客户型号"></el-input>
          </div>
          <div class="search-form-item">
            <label>客户</label>
            <el-input v-model="search.customer" class="form-input" placeholder="请输入客户"></el-input>
          </div>
          <div class="search-form-item">
            <label>订单编号</label>
            <el-input v-model="search.companyOrderId" class="form-input" placeholder="请输入公司订单编号"></el-input>
          </div>
          <div class="search-form-item">
            <label>工厂型号</label>
            <el-input v-model="search.factoryId" class="form-input" placeholder="请输入工厂型号"></el-input>
          </div>
        </div>
      </search-btn-view>
      <div class="querry-order-help clearfix">
        <div class="clearfix">
          <div class="color accessTardiness"></div>
          <span>代表车间生产将近拖期(3天以内包括3天),</span>
          <span>交货日期列代表订单将近拖期(10天以内包括10天)</span>
        </div>
        <div class="clearfix">
          <div class="color tardiness"></div>
          <span>代表车间生产已经拖期,</span>
          <span>交货日期列代表订单已经拖期</span>
        </div>
        <div class="clearfix">
          <div class="color finishSetting"></div>
          <span>代表该订单已经完成</span>
        </div>
      </div>
      <div class="querry-order-table-div">
        <el-table class="querry-order-table" fit border :data="orderList" style="width: 100%" header-row-class-name="orderTableHeader"
          :span-method="mergeMethod" :cell-class-name="getDelayaClassName" ref="orderTable" height="parent">
          <el-table-column :resizable="false" prop="orderId" label="订单编号" :auto-width="true" min-width="70px" fixed="left"
            key="showOrderId">
            <template slot-scope="scope">
              <div v-if="!SysUtil.isEmpty(scope.row.showOrderId)" class="table-btn" @click="toLookDetail(scope.row)">
                {{scope.row.showOrderId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="factoryId" label="工厂型号" :auto-width="true" min-width="70px" fixed="left"
            key="factoryId">
            <template slot-scope="scope">
              <div v-if="!SysUtil.isEmpty(scope.row.factoryId)" class="table-btn" @click="showQuanImg(scope.row)">
                {{scope.row.factoryId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="customerId" label="客户型号" :auto-width="true" min-width="70px" fixed="left"
            key="customerId"></el-table-column>
          <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" prop="customerOrderId"
            label="客户订单号" :auto-width="true" min-width="90px" key="customerOrderId"></el-table-column>
          <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" prop="customer" label="客户"
            :auto-width="true" min-width="60px" key="customer"></el-table-column>
          <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" prop="chiCun" label="尺寸"
            :auto-width="true" min-width="70px" key="chiCun"></el-table-column>
          <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" label="下单日期" min-width="90px"
            align="center" key="xiaDanDate">
            <template slot-scope="scope">
              <span v-if="scope.row.sort<0">
                {{scope.row.xiaDanDate===''?'':moment(scope.row.xiaDanDate).format('YYYY-MM-DD')}}
              </span>
              <update-date-popover v-else :date="scope.row.xiaDanDate" :max-date="scope.row.jiaoDate" title="下单日期">
              </update-date-popover>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" prop="jiaoDate" label="交货日期" min-width="90px" align="center" key="jiaoDate">
            <template slot-scope="scope">
              <div v-if="scope.row.jiaoDate!==''" class="table-btn" @click="lookOrderImg(scope.row)">{{moment(scope.row.jiaoDate).format('YYYY-MM-DD')}}</div>
            </template>
          </el-table-column>
          <el-table-column v-if="showTableMode==='detail'||mode==='hard'" :resizable="false" prop="orderCount" label="订单总数"
            min-width="80px" align="center" key="orderCount">
            <template slot-scope="scope">
              <div class="table-btn" @click="toWorkProcedure(scope.row)">
                {{scope.row.orderCount}}
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="showTableMode==='detail'" :resizable="false" label="圈料" min-width="150px" header-align="center"
            key="ringMaterial" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{getMaterial('ring',scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="showTableMode==='detail'" :resizable="false" label="腿料" min-width="150px" header-align="center"
            key="legMaterial" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{getMaterial('leg',scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="采购" min-width="50px" align="center" key="purchaseStatus">
            <template slot-scope="scope">
              <div v-html="scope.row.purchaseStatusHtml"></div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="入库" min-width="50px" align="center" key="inStatus">
            <template slot-scope="scope">
              <div v-html="scope.row.inStatusHtml"></div>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="外协" min-width="55px" align="center" key="putOutStatus">
            <template slot-scope="scope">
              <div v-if="scope.row.putOutStatusStr!==''" class="table-btn" @click="toOutOrder(scope.row)">
                {{scope.row.putOutStatusStr}}
              </div>
            </template>
          </el-table-column>
          <el-table-column v-for="(workShop,index) in tableWorkShopList" :key="workShop.id" :resizable="false" :label="workShop.name">
            <el-table-column v-if="showTableMode==='order'" :resizable="false" label="完成情况" min-width="75px" align="center"
              :key="'finishStatus'+workShop.id">
              <template slot-scope="scope">
                <span v-if="getWorkShopDetail(scope.row,workShop)===null">
                  无需生产
                </span>
                <span v-else>{{getFinishStatus(scope.row,workShop)}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" label="人工排期" min-width="95px"
              align="center" :key="'peopleSetTime'+workShop.id">
              <template slot-scope="scope">
                <span v-if="!getWorkShopDetail(scope.row,workShop,'canUpdate')">
                  <span>{{getWorkShopDate(scope.row,workShop,'peopleSetTime')}}</span>
                </span>
                <update-date-popover v-else title="人工排期" :date="getWorkShopDetail(scope.row,workShop,'peopleSetTime')"
                  :max-date="scope.row.jiaoDate" :min-date="getWorkShopDetail(scope.row,workShop,'creationTime')">
                </update-date-popover>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" label="物料" min-width="80"
              :key="'status'+workShop.id">
              <template slot-scope="scope">
                <div class="table-btn" @click="sufficeDetail(scope.row,workShop)">{{getWorkShopDetail(scope.row,workShop,'status')}}</div>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableMode==='detail'||mode==='hard'" :resizable="false" label="完成日期" min-width="80px"
              align="center" :key="'finishTime'+workShop.id">
              <template slot-scope="scope">
                <span v-if="showTableMode==='detail'&&getWorkShopDetail(scope.row,workShop)===null">
                  无需生产
                </span>
                <span v-else>{{getWorkShopDate(scope.row,workShop,'finishTime','MM-DD')}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" label="预计完成日期" min-width="100px"
              align="center" :key="'yuJiTime'+workShop.id">
              <template slot-scope="scope">
                <span>{{getWorkShopDetail(scope.row,workShop,'yuJiTimeStr')}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableMode==='detail'||mode==='hard'" :resizable="false" label="数量" min-width="60px"
              align="center" :key="'wsCount'+workShop.id">
              <template slot-scope="scope">
                <span>{{getWorkShopDetail(scope.row,workShop,'count')}}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>

      <el-dialog :title="imgDialogTitle" :visible.sync="openPreviewImg" :fullscreen="true" class="img-dialog"
        :lock-scroll="true" :show-close="true">
        <div v-if="openPreviewImg" class="pre-view-img">
          <div class="pre-view-img-content">
            <img :src="formatImgUrl(previewImg)">
          </div>
          <div style="margin-top:10px">
            <el-button type="primary" @click="openPreviewImg=false">关闭</el-button>
          </div>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="openOrderDetail" top="5vh" custom-class="sysAddFormDialog orderDialog" width="70%"
        @closed="order=null">
        <div class="order-detail-title clearfix" slot="title">
          <div>订单明细</div>
          <template v-for="(title,index) in orderDetailTitles">
            <div :key="`title_${index}`" class="title-item">{{title}}</div>
          </template>
        </div>
        <div style="height: 75vh;overflow: auto;">
          <order-detail v-if="openOrderDetail" :order="order" @change-title="changeOrderTitle"></order-detail>
        </div>
      </el-dialog>

      <el-dialog title="车间生产物料入库情况" :visible.sync="openSufficeDialog" top="10vh" class="sufficeDetailDialog" @closed="sufficeDetailData=null"
        width="65%">
        <div style="min-height:60vh;max-height:70vh;overflow:auto;">
          <suffice-detail v-if="openSufficeDialog" :details="sufficeDetailData"></suffice-detail>
        </div>
      </el-dialog>

      <el-dialog title="外协单" :visible.sync="openOutOrder" top="5vh" width="90%" @closed="order=null">
        <div style="height:calc(90vh - 51px);">
          <out-order v-if="openOutOrder" :order="order"></out-order>
        </div>
      </el-dialog>

      <el-dialog title="物料进度" :visible.sync="openWorkProcedure" custom-class="workProcedureDialog" :fullscreen="true"
        @closed="order=null">
        <work-procedure v-if="openWorkProcedure" :order="order"></work-procedure>
      </el-dialog>
    </div>
  </div>
</body>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "./css/proReport.css",
    "./css/orderDetail.css",
    "./css/updateDatePopover.css",
    "./css/sufficeDetail.css",
    "./css/outOrder.css",
    "./css/workProcedure.css"
  ], [
    "/vueSystem/js/permissionUtil.js",
    "/vueSystem/components/searchBtnView.js",
    "./proReport.js",
    "./orderDetail.js",
    "./updateDatePopover.js",
    "./sufficeDetail.js",
    "./outOrder.js",
    "./workProcedure.js"
  ]);
</script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var self = this;
      var startDate = moment().subtract(10, 'day').valueOf();
      var endDate = moment().valueOf();
      var search = {
        timeType: 1,
        startDate: startDate,
        endDate: endDate,
        deptId: '',
        workShop: '',
        type: 0,
        customerId: '',
        customer: '',
        companyOrderId: '',
        factoryId: '',
        dutyStatus: 0,
        workShopList: []
      };
      //       var hasSettingBtn = PermissionUtil.validateAuthority('orderProcedureTemplate/setOrderSort');
      return {
        loading: false,
        mode: 'hard',
        workShopLoading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        deptList: [],
        orderList: [],
        tableWorkShopList: [],
        //         hasSettingBtn: hasSettingBtn,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        previewImg: '',
        imgDialogTitle: '',
        openPreviewImg: false,
        order: null,
        openOrderDetail: false,
        orderDetailTitles: [],
        openSufficeDialog: false,
        sufficeDetailData: null,
        openOutOrder: false,
        openWorkProcedure: false,
        SysUtil: SysUtil,
        moment: moment,
        searchMode: 'order',
        showTableMode: 'order',
        startPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'start');
          }
        },
        endPickerOptions: {
          disabledDate: function (time) {
            return !self.checkDateRange(time, 'end');
          }
        }
      };
    },
    created: function () {
      var self = this;
      this.loading = true;
      this.setDeptList().then(function (deptList) {
        self.loading = false;
        if (deptList.length === 0) {
          return;
        }
        if (deptList.length === 1) {
          self.search.deptId = deptList[0].id;
        }
        self.deptChange();
        self.setOrderList(true);
      });
    },
    methods: {
      setDeptList: function () {
        var self = this;
        return ajaxRequest('thirdPartyView/getProductionDepartment').then(function (deptList) {
          deptList = _.map(deptList, function (dept) {
            return {
              id: dept.id,
              name: dept.deptName
            };
          });
          self.deptList = deptList;
          return deptList;
        }).catch(function () {
          return [];
        });
      },
      deptChange: function () {
        var search = this.search;
        var deptId = search.deptId;
        if (deptId === '') {
          search.workShop = '';
          search.workShopList = [];
          return;
        }

        this.workShopLoading = true;
        var self = this;
        this.getWorkShop(deptId).then(function (workShopList) {
          self.search.workShopList = workShopList;
          self.search.workShop = '';
          self.workShopLoading = false;
        }).catch(function () {
          self.workShopLoading = false;
        });
      },
      getWorkShop: function (deptId) {
        return new Promise(function (resole, reject) {
          if (deptId === '') {
            resole([]);
            return;
          }

          ajaxRequest('thirdPartyView/getDeptNoMegerWorkShop', {
            //           ajaxRequest('basicData/getDeptNoMegerWorkShop', {
            deptId: deptId
          }).then(function (workShopList) {
            workShopList = _.map(workShopList, function (workShop) {
              return {
                id: workShop.id,
                name: workShop.workshopName
              };
            });
            resole(workShopList);
          }).catch(function () {
            reject();
          });
        });
      },
      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },
      searchData: function (index) {
        if (index === 0) {
          this.searchMode = 'order';
        } else {
          this.searchMode = 'detail';
        }

        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },
      pageChange: function () {
        this.setOrderList();
      },
      setOrderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        if (!this.checkValidate(search)) {
          return;
        }

        var postData = this.getPostData();
        var searchMode = this.searchMode;
        var url = '';
        var hasResult;
        if (searchMode === 'order') {
          url = 'thirdPartyView/getOrderMain';
          //           url = 'order/getOrderMain';
          hasResult = true;
        } else {
          url = 'thirdPartyView/queryOrderPageDateil';
          //           url = 'order/queryOrderPageDateil';
          hasResult = true;
        }

        this.loading = true;
        var self = this;
        return ajaxRequest(url, postData, hasResult).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }
          var orderInfo = res.orderList;
          var orderList = orderInfo.returnData;
          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            order.jiaoDate = SysUtil.formatString2Date(order.jiaoDate, 'YY/MM/DD');
            order.xiaDanDate = SysUtil.formatString2Date(order.xiaDanDate, 'YY/MM/DD');

            var companyOrderId = order.companyOrderId;
            if (companyOrderId === null || companyOrderId.trim() === '') {
              order.showOrderId = order.orderId;
            } else {
              order.showOrderId = companyOrderId.trim();
            }

            var putOutStatus = order.putOutStatus;
            var putOutStatusStr = ['无外协', '完成', '未完成'][putOutStatus];
            if (putOutStatusStr === undefined) {
              putOutStatusStr = '';
            }
            order.putOutStatusStr = putOutStatusStr;

            var purchaseStatus = order.purchaseStatus;
            order.purchaseStatusHtml = self.getStatusHtml(order, purchaseStatus);

            var inStatus = order.inStatus;
            order.inStatusHtml = self.getStatusHtml(order, inStatus);

            var wpcbList = order.wpcbList;
            if (wpcbList === null) {
              wpcbList = [];
            }
            var wpcbObj = {};
            for (var j = 0; j < wpcbList.length; j++) {
              var wpcb = wpcbList[j];
              var isFinish = wpcb.isFinish;
              var obj = {
                workshopName: wpcb.workshopName,
                isFinish: isFinish,
                detailList: wpcb.workShopMaterialDetailList
              };

              var sort = order.sort;
              if (sort < 0 || isFinish === 1) {
                obj.canUpdate = false;
              } else {
                obj.canUpdate = true;
              }

              if (isFinish !== 0) {
                var count = _.get(wpcb, 'processList[0].qualityCount');
                if (count === undefined || count === null) {
                  count = '';
                }
                obj.count = count;

                var processName = _.get(wpcb, 'processList[0].processName');
                if (processName === undefined || processName === null) {
                  processName = '';
                }
                obj.processName = processName;

                var creationTime = _.get(wpcb, 'processList[0].creationTime');
                if (creationTime !== undefined) {
                  obj.creationTime = SysUtil.formatString2Date(creationTime);
                }
              }
              obj.finishTime = SysUtil.formatString2Date(wpcb.finishTime);
              var yuJiTime = SysUtil.formatString2Date(wpcb.yuJiTime);
              obj.yuJiTime = yuJiTime;
              if (yuJiTime === '') {
                obj.yuJiTimeStr = wpcb.yuJiTime;
              } else {
                obj.yuJiTimeStr = moment(yuJiTime).format('YYYY-MM-DD');
              }

              var status = self.getArriveStatus(order, wpcb);
              obj.status = status;

              obj.peopleSetTime = SysUtil.formatString2Date(wpcb.peopleSetTime, 'YY/MM/DD');
              wpcbObj[wpcb.id] = obj;
            }
            order.wpcb = wpcbObj;
          }
          self.orderList = orderList;

          var deptWorkShop = res.deptWorkShop;
          var tableWorkShopList = _.map(deptWorkShop, function (workShop) {
            return {
              id: workShop.id,
              name: workShop.workshopName
            };
          });
          self.tableWorkShopList = tableWorkShopList;

          self.pagination.totalCount = orderInfo.iTotalRecords;
          self.showTableMode = searchMode;
          self.loading = false;

          return orderList;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },
      getPostData: function (hasPage) {
        if (hasPage === undefined) {
          hasPage = true;
        }
        var search = this.search;
        var postData = {
          timeType: search.timeType,
          startDate: moment(search.startDate).format('YYYY-MM-DD'),
          date: moment(search.endDate).format('YYYY-MM-DD'),
          deptId: search.deptId,
          workShop: search.workShop,
          type: search.type,
          dutyStatus: search.dutyStatus,
          customerId: search.customerId.trim(),
          customer: search.customer.trim(),
          companyOrderId: search.companyOrderId.trim(),
          factoryId: search.factoryId.trim()
        };

        if (hasPage) {
          var pagination = this.pagination;
          var currentPage = pagination.currentPage;
          var pageSize = pagination.pageSize;
          var start = (currentPage - 1) * pageSize;
          postData.start = start;
          postData.length = pageSize;
        }
        return postData;
      },
      getArriveStatus: function (order, wpcb) {
        var sort = order.sort;
        if (sort < 0) {
          return '已到齐';
        }
        var detailList = wpcb.workShopMaterialDetailList;
        if (detailList === null) {
          detailList = [];
        }

        if (detailList.length === 0) {
          return '未到齐';
        }

        var detailGroup = _.groupBy(detailList, 'inStatus');
        var keys = Object.keys(detailGroup);
        if (keys.length > 1) {
          return '部分到齐';
        }

        var status = keys[0];
        var statusList = ['未到齐', '已到齐', '部分到齐'];
        return statusList[status];
      },
      checkValidate: function (search) {
        var type = search.type;
        if (type !== 0) {
          var workShop = search.workShop;
          if (workShop === '') {
            this.$alert('请选择车间', '信息');
            return false;
          }
        }
        return true;
      },
      //       toFinishPro: function (order) {
      //         this.loading = true;
      //         var self = this;
      //         ajaxRequest('orderProcedureTemplate/setOrderSort', {
      //           orderId: order.orderId,
      //           sort: -1
      //         }).then(function (msg) {
      //           self.loading = false;
      //           self.$alert('设置完成设置成功', '信息', {
      //             callback: function () {
      //               self.setOrderList();
      //             }
      //           });
      //         }).catch(function () {
      //           self.loading = false;
      //         });
      //       },
      showQuanImg: function (order) {
        var img = order.quanImg;
        if (img === null || img.trim() === '') {
          this.$alert('该订单未设置圈图', '信息');
          return;
        }
        this.previewImg = img;
        this.imgDialogTitle = '圈图';
        this.openPreviewImg = true;
      },
      //       exportExcel: function () {
      //         this.search = _.cloneDeep(this.oldSearch);
      //         var postData = this.getPostData(false);
      //         var formParam = SysUtil.formatFormParam(postData);
      //         var basePath = SysUtil.getBasePath();
      //         var path = `${basePath}/order/downlodeOrderWhere?${formParam}`;
      //         window.open(path);
      //       },
      changeMode: function () {
        var mode = this.mode;
        if (mode === 'simple') {
          mode = 'hard';
        } else if (mode === 'hard') {
          mode = 'simple';
        }
        this.mode = mode;
      },
      toLookDetail: function (order) {
        this.order = order;
        this.openOrderDetail = true;
        this.orderDetailTitles = [];
      },
      changeOrderTitle: function (titles) {
        this.orderDetailTitles = titles;
      },
      toWorkProcedure: function (order) {
        this.order = order;
        this.openWorkProcedure = true;
      },
      toOutOrder: function (order) {
        var putOutStatus = order.putOutStatus;
        if (putOutStatus === 0) {
          this.$alert('此订单无外协单');
          return;
        }

        this.order = order;
        this.openOutOrder = true;
      },
      getStatusHtml: function (order, status) {
        var sort = order.sort;
        if (sort < 0) {
          status = 1;
        }
        var list = [{
          text: "否",
          color: "#f56c6c"
        }, {
          text: "是",
          color: "#5daf34"
        }, {
          text: "部分",
          color: "#cf9236"
        }];

        var obj = list[status];
        if (obj === undefined) {
          return '';
        }
        return `<span style="color:${obj.color}">${obj.text}</span>`;
      },
      getDelayaClassName: function (option) {
        var property = option.column.property;
        if (property === 'setting') {
          return '';
        }

        var row = option.row;
        if (property === 'jiaoDate') {
          return this.getOrderDelay(row);
        } else if (['orderId', 'factoryId', 'customerId'].indexOf(property) !== -1) {
          if (row.sort < 0) {
            return 'finishSetting';
          }
          return '';
        }

        var mode = this.mode;
        var showTableMode = this.showTableMode;
        var colCount = 0;
        if (showTableMode === 'detail') {
          colCount = 10;
        } else if (mode === 'simple') {
          colCount = 7;
        } else if (mode === 'hard') {
          colCount = 12;
        }
        var columnIndex = option.columnIndex;
        var colIndex = columnIndex - colCount;
        if (colIndex < 0) {
          return '';
        }
        var sort = row.sort;
        if (sort < 0) {
          return '';
        }
        var tableWorkShopList = this.tableWorkShopList;
        var index = Math.floor(colIndex / 6);
        var workShop = tableWorkShopList[index];
        var detail = this.getWorkShopDetail(row, workShop);
        if (detail === null) {
          return '';
        }
        var endDate = detail.peopleSetTime;
        if (endDate === '') {
          endDate = detail.yuJiTime;
        }
        var startDate;
        var isFinish = detail.isFinish;
        if (isFinish === 1) {
          startDate = detail.finishTime;
        } else {
          startDate = moment().valueOf();
        }
        var rangeDay = moment(endDate).diff(startDate, 'day');
        if (isNaN(rangeDay)) {
          return '';
        }
        if (rangeDay < 0) {
          return 'tardiness';
        }
        if (rangeDay <= 3) {
          return 'accessTardiness';
        }
        return '';
      },
      getOrderDelay: function (order) {
        var sort = order.sort;
        if (sort < 0) {
          return '';
        }

        var dutyStatus = order.dutyStatus;

        if (dutyStatus === 1) {
          return 'tardiness';
        }
        if (dutyStatus === 2) {
          return 'accessTardiness';
        }
        return '';
      },
      getFinishStatus: function (order, workShop) {
        var detail = this.getWorkShopDetail(order, workShop);
        if (detail === null) {
          return '';
        }
        if (order.sort < 0) {
          return "已完成";
        }
        var status = detail.isFinish;
        if (status === 2) {
          return detail.processName;
        }

        var statusList = ["未生产", "已完成", "未完成"];
        return statusList[status];
      },
      getWorkShopDate: function (order, workShop, field, formatter) {
        var time = this.getWorkShopDetail(order, workShop, field);
        if (time === '') {
          return '';
        }

        if (formatter === undefined) {
          formatter = 'YYYY-MM-DD';
        }
        return moment(time).format(formatter);
      },
      getWorkShopDetail: function (order, workShop, field) {
        if (workShop === undefined) {
          if (field === undefined) {
            return null;
          }
          return '';
        }
        var wpcb = order.wpcb;
        var detail = wpcb[workShop.id];
        if (detail === undefined) {
          if (field === undefined) {
            return null;
          }
          return '';
        }

        if (field === undefined) {
          return detail;
        }
        var value = _.get(detail, field, '');
        return value;
      },
      sufficeDetail: function (order, workShop) {
        var detail = this.getWorkShopDetail(order, workShop);
        var detailList = detail.detailList;
        if (detailList === null) {
          detailList = [];
        } else {
          detailList = _.cloneDeep(detailList);
        }
        var sort = order.sort;
        var sufficeDetailData = _.map(detailList, function (obj) {
          if (sort < 0) {
            obj.inStatus = 1;
          }
          return obj;
        });

        this.sufficeDetailData = sufficeDetailData;
        this.openSufficeDialog = true;
      },
      lookOrderImg: function (order) {
        var self = this;
        this.loading = true;
        ajaxRequest('thirdPartyView/getOrderApprovalImg', {
          orderId: order.orderId
        }).then(function (url) {
          self.loading = false;

          if (url === null || url === '') {
            self.$alert('无生产订单图片', '信息');
            return;
          }
          self.imgDialogTitle = '生产订单预览';
          self.previewImg = url;
          self.openPreviewImg = true;
        }).catch(function () {
          self.loading = false;
        });
      },
      checkDateRange: function (time, type) {
        var search = this.search;
        if (type === 'start') {
          var endDate = search.endDate;
          return moment(time).isSameOrBefore(endDate, 'day');
        } else if (type === 'end') {
          var startDate = search.startDate;
          return moment(time).isSameOrAfter(startDate, 'day');
        }
        return true;
      },
      getMaterial: function (type, order) {
        var materialTypeList = [];
        if (type === 'ring') {
          materialTypeList = ["金属圈", "板材圈", "TR圈", "PC圈", "塑钢圈", "注塑圈", "TLL圈"];
        } else if (type === 'leg') {
          materialTypeList = ["金属肶", "板材肶", "TR肶", "PC肶", "塑钢肶", "注塑腿", "TLL肶"];
        }

        var orderMaterialList = order.orderMaterialList;
        orderMaterialList = _.filter(orderMaterialList, function (material) {
          return materialTypeList.indexOf(material.materialType) !== -1;
        });
        var colorList = [];
        var len = orderMaterialList.length;
        for (var i = 0; i < len; i++) {
          var material = orderMaterialList[i];
          var color = material.colorDescription === '' ? material.color : material.colorDescription;
          if (color !== '') {
            colorList.push(color);
          }
        }
        return colorList.join('+');
      },
      mergeMethod: function (option) {
        var property = option.column.property;
        if (property === 'setting') {
          return [1, 1];
        }

        var mode = this.mode;
        var showTableMode = this.showTableMode;
        var colCount = 0;
        if (showTableMode === 'detail') {
          colCount = 10;
        } else if (mode === 'simple') {
          colCount = 7;
        } else if (mode === 'hard') {
          colCount = 12;
        }

        var row = option.row;
        var columnIndex = option.columnIndex;
        var colIndex = columnIndex - colCount;
        if (colIndex < 0) {
          return [1, 1];
        }
        var tableWorkShopList = this.tableWorkShopList;
        var mergeColCount;
        if (showTableMode === 'detail') {
          mergeColCount = 2;
        } else if (mode === 'simple') {
          mergeColCount = 2;
        } else if (mode === 'hard') {
          mergeColCount = 6;
        }
        var index = Math.floor(colIndex / mergeColCount);
        var workShop = tableWorkShopList[index];
        if (this.getWorkShopDetail(row, workShop) !== null) {
          return [1, 1];
        }

        if (colIndex % mergeColCount === 0) {
          return [1, mergeColCount];
        }
        return [0, 0];
      }
    },
    components: {
      OrderDetail: OrderDetail,
      UpdateDatePopover: UpdateDatePopover,
      SearchBtnView: SearchBtnView,
      SufficeDetail: SufficeDetail,
      OutOrder: OutOrder,
      WorkProcedure: WorkProcedure
    }
  });
</script>
<style>
  .querry-order {
    padding: 10px 20px;
    padding-bottom: 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .querry-order .querry-order-search .search-form-item {
    float: left;
    height: 40px;
    margin-bottom: 15px;
    margin-right: 15px;
  }

  .querry-order .querry-order-search .search-form-item>label {
    display: inline-block;
    height: 40px;
    line-height: 40px;
  }

  .querry-order .querry-order-search .search-form-item .form-input {
    width: 160px;
  }

  .querry-order-help>div {
    float: left;
    margin-right: 10px;
  }

  .querry-order-help>div>* {
    float: left;
    line-height: 30px;
  }

  .querry-order-help .color {
    height: 20px;
    width: 20px;
    margin-top: 5px;
    margin-right: 5px;
  }

  .querry-order .querry-order-table-div {
    width: 100%;
    overflow: auto;
    margin-top: 10px;
    flex: 1;
  }

  .querry-order .querry-order-table-div .orderTableHeader th>.cell {
    text-align: center;
  }

  .querry-order .querry-order-table-div .orderTableHeader th {
    background: #F5F7FA;
  }

  .querry-order .querry-order-table-div .table-btn {
    padding: 5px 0;
    color: #409EFF;
    cursor: pointer;
    text-align: center;
  }

  .querry-order .accessTardiness {
    background: #E6A23C;
  }

  .querry-order .tardiness {
    background: #F56C6C;
  }

  .querry-order .finishSetting {
    background: #99ff99;
  }

  .order-detail-title>div {
    float: left;
  }

  .order-detail-title .title-item {
    font-size: 12px;
    color: #ff0000;
    margin-left: 10px;
    line-height: 26px;
  }

  .orderDialog {
    min-width: 600px;
  }

  .sufficeDetailDialog .el-dialog {
    margin-bottom: 0;
  }

  .querry-order .el-table td {
    padding: 5px 0;
  }

  .img-dialog .el-dialog__body {
    height: calc(100% - 54px);
  }

  .pre-view-img {
    height: 100%;
    overflow: auto;
    text-align: center;
  }

  .pre-view-img .pre-view-img-content {
    height: calc(100% - 60px);
    overflow: auto;
  }

  .workProcedureDialog .el-dialog__body {
    height: calc(100% - 54px);
    overflow: auto;
  }
</style>

</html>